"use strict";
const path = require("path");
const defaultSettings = require("./src/settings.js");

function resolve(dir) {
  return path.join(__dirname, dir);
}

const name = defaultSettings.title || "H vue element admin"; // page title

// 所有配置项的说明 https://cli.vuejs.org/config/
module.exports = {
  /**
   *
   * 如果需要将网站部署到子路径中，则需要配置publicPath
   * 列如将网站部署到 https://www.baidu.com/dlist/
   * 那么publicPath应该设置为/dlist/
   * 大多数情况下使用 `/` !!!
   * 详情: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: "/",
  outputDir: "dist",
  assetsDir: "static",
  // lintOnSave: process.env.NODE_ENV === "development",
  productionSourceMap: false, //打包后不生成map文件
  lintOnSave: false,
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
  },
  chainWebpack(config) {
    // 开启预加载，以提高首屏的加载速度
    config.plugin("preload").tap(() => [
      {
        rel: "preload",
        // 忽略 runtime.js
        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: "initial",
      },
    ]);

    // 当有很多页面的时候，它会导致太多无意义的请求
    config.plugins.delete("prefetch");

    // 设置 svg-sprite-loader
    config.module.rule("svg").exclude.add(resolve("src/icons")).end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      })
      .end();

    config.when(process.env.NODE_ENV !== "development", (config) => {
      config
        .plugin("ScriptExtHtmlWebpackPlugin")
        .after("html")
        .use("script-ext-html-webpack-plugin", [
          {
            // `runtime` 必须与runtimeChunk名称相同。默认是 `runtime`
            inline: /runtime\..*\.js$/,
          },
        ])
        .end();

      /* 
      在Webpack的配置中，minChunks 是一个选项，用于splitChunks插件中的cacheGroups配置。它指定了模块应被提取到公共块中的最小数量。

      当你使用splitChunks来拆分你的代码块（chunks）时，Webpack会分析模块之间的关系并尝试找出可以共享的公共模块。这些公共模块会被提取到单独的块中，以便它们可以在多个入口点（entry points）之间重用。

      minChunks选项就是用来确定哪些模块应该被提取到公共块中的。例如，如果你设置minChunks: 3，那么只有当一个模块在至少3个不同的入口点或块中被引用时，它才会被提取到一个公共块中。

      在你提供的配置示例中，commons缓存组有一个minChunks设置为3。这意味着，只有在src/components目录中的某个模块被至少3个不同的块引用时，它才会被提取到chunk-commons这个公共块中。

      这种配置对于优化代码加载性能非常有用，因为它允许你将那些只在特定部分或路由中使用的代码拆分成单独的块，从而减少不必要的加载量。同时，通过将公共的、被多个入口点引用的模块提取到单独的块中，也可以提高缓存效率。
      */

      config.optimization.splitChunks({
        chunks: "all",
        cacheGroups: {
          libs: {
            name: "chunk-libs",
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: "initial", // 只打包最初依赖的第三方
          },
          elementUI: {
            name: "chunk-elementUI", // 将elementUI拆分为一个包
            priority: 20, // 重量需要大于库和应用程序，否则它将被打包为库或应用程序
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // 为了适应 cnpm
          },
          commons: {
            name: "chunk-commons",
            test: resolve("src/components"), // 你可以自定义规则
            minChunks: 3, //  最小数量，当数量超过设置的数量后才会将
            priority: 5,
            reuseExistingChunk: true,
          },
        },
      });

      // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
      config.optimization.runtimeChunk("single");
    });
  },
};
